<template>
    <div class="config">
        <Tabs type="card" :animated="false" style="background:#efeff1" v-model="currentTab" @on-click="handleTabChange">
            <TabPane v-for="menu in menus" :key="menu.id" :label="menu.label">
                <component :is="menu.component" v-if="menu.loaded"></component>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
import companySetting from './lock-company'
import branchSetting from './lock-branch'

export default {
  name: 'config_lock',
  components: {
    companySetting,
    branchSetting
  },
  data () {
    return {
      currentTab: 0,
      menus: [
        {
          id: 1,
          label: '公司(全局)安全配置',
          component: 'companySetting',
          loaded: true
        }, {
          id: 2,
          label: '门店安全配置',
          component: 'branchSetting',
          loaded: false
        }
      ]
    }
  },
  methods: {
    handleTabChange (index) {
      if (!this.menus[index].loaded) this.$set(this.menus[index], 'loaded', true)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
